<script lang="ts">
export default {
  options: {
    virtualHost: true, // 虚拟节点
    styleIsolation: 'shared', // 解除样式隔离
  },
}
</script>

<!-- eslint-disable import/first -->
<script lang="ts" setup>
import type { ClassApi } from '@/apis'

defineProps<{
  item: ClassApi.ClassInfoResp
}>()
</script>

<template>
  <view class="rounded-2 bg-white p-[24rpx]">
    <view>
      <text v-if="item.classCategory === 1" class="rounded bg-[#ee8432] px-2rpx text-26rpx color-white">
        长
      </text>
      <text v-else-if="item.classCategory === 2" class="rounded bg-[#2176E7] px-2rpx text-26rpx color-white">
        短
      </text>
      <text class="ml-1 text-32rpx font-500 text-main">
        {{ item.name }}
      </text>
    </view>
    <view v-if="item.arrangeTemplate" class="mt-2 flex-row-between-center text-24rpx text-secondary">
      <text>
        {{ item.arrangeTemplate.startDate }}～{{ item.arrangeTemplate.endDate }}
      </text>
      <text>
        {{ item.enrollStudentCount }}/{{ item.planStudentCount }}人
      </text>
    </view>
    <view v-if="item.campusName" class="mt-2 text-24rpx text-secondary">
      {{ item.campusName }}·{{ item.classroomName }}
    </view>
    <slot name="bottom" />
  </view>
</template>

<style lang="scss" scoped>

</style>
